<template>
  <div class="gxweihu-contrainer">
    <el-form :inline="true" :model="formInline">
      <el-form-item label="工序">
        <el-input v-model="formInline.opName" placeholder="输入工序名" />
      </el-form-item>
      <el-form-item label="中心">
        <el-select
          v-model="formInline.pkWorkcenter"
          class="m-2"
          placeholder="选择"
        >
          <el-option
            v-for="wc in state.wcs"
            :key="wc.pkWc"
            :label="wc.wcName"
            :value="wc.pkWc"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-row>
        <el-col v-for="gx in state.gxDatas" :key="gx" :span="12">
          <div class="gxcard button1" @click="xuanGx(gx)">
            <span>{{ gx.opCode }}</span>
            <span>&nbsp;---&nbsp;</span>
            <span>{{ gx.opName }}</span>
          </div>
        </el-col>
      </el-row>
      <el-pagination
        :current-page="paginationParams.pageIndex"
        :layout="layout"
        :page-size="paginationParams.pageSize"
        small
        :total="paginationParams.total"
        @current-change="handlePaginationCurrentChange"
        @size-change="handlePaginationSizeChange"
      />
    </div>
    <div style="height: 20px"></div>
    <div class="gxinfo">
      <el-form :model="gxWhData">
        <el-row><h3>组维护</h3></el-row>
        <el-row justify="space-around">
          <el-col :span="7">
            <el-form-item label="组">
              <el-switch
                v-model="gxWhData.isGroup"
                active-text="是"
                inactive-text="否"
                inline-prompt
              />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="并行">
              <el-switch
                v-model="gxWhData.isMerge"
                active-text="是"
                inactive-text="否"
                inline-prompt
              />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="合并">
              <el-switch
                v-model="gxWhData.isHb"
                active-text="是"
                inactive-text="否"
                inline-prompt
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row justify="end">
          <el-form-item>
            <el-button type="primary" @click="suoding">锁定</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div style="height: 20px"></div>
    <div class="gxinfo">
      <el-form :model="gxWhData">
        <el-row><h3>工序维护</h3></el-row>
        <el-row justify="space-around">
          <el-col :span="6">
            <span class="gxZi">{{ state.xzGx.opCode }}</span>
          </el-col>
          <el-col :span="10">
            <span class="gxZi">{{ state.xzGx.opName }}</span>
          </el-col>
        </el-row>
        <el-row style="height: 10px" />
        <el-row justify="space-around">
          <el-col :span="10">
            <el-form-item label="本道比例">
              <el-input v-model="gxWhData.currentRatio" type="number" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="下道比例">
              <el-input v-model="gxWhData.nextRatio" type="number" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row justify="end">
          <el-form-item>
            <el-button type="primary" @click="suoding">锁定</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script setup>
  import { getOperPageApi } from '@/api/base/op/index'
  import { localStorageConfig } from '@/config/localstorage.config'
  import { gongxuStore } from '@/store/modules/gongxu'
  import { getWcListApi } from '@/api/base/wc/index'
  const pkCorp = localStorage.getItem(localStorageConfig.__pkCorp)

  const formInline = reactive({
    opName: '',
    pkWorkcenter: '',
  })

  const paginationParams = reactive({
    pageIndex: 1,
    pageSize: 10,
    total: 0,
  })

  const gxWhData = reactive({
    isGroup: false,
    isMerge: false,
    isHb: false,
    currentRatio: 1.0,
    nextRatio: 1.0,
  })

  const state = reactive({
    gxDatas: [],
    xzGx: {},
    wcs: [],
  })

  //#region pagintion 开始
  const layout = ref('prev, pager, next')
  const handlePaginationCurrentChange = (...args) => {
    paginationParams.pageIndex = args[0] ? args[0] : 1
  }
  const handlePaginationSizeChange = (...args) => {
    paginationParams.pageSize = args[0] ? args[0] : 20
    paginationParams.pageIndex = 1
  }
  //#endregion

  const onSubmit = async () => {
    let params = {
      pkCorp: pkCorp,
      ...paginationParams,
      ...formInline,
    }
    console.log(params)
    const { code, data } = await getOperPageApi(params)
    if (code === 2000) {
      state.gxDatas = data.list
      paginationParams.total = data.total
    }
  }

  const xuanGx = (gx) => {
    state.xzGx = gx
    gxWhData.isGroup = false
    gxWhData.isMerge = false
    gxWhData.isHb = false
    suoding()
  }

  const suoding = () => {
    gongxuStore().setGx({ ...gxWhData, ...state.xzGx })
  }

  onMounted(async () => {
    const { code, data } = await getWcListApi({ pkCorp: pkCorp })
    if (code === 2000) {
      state.wcs = data
    }
  })

  watch(paginationParams, () => {
    onSubmit()
  })
</script>

<style lang="scss" scoped>
  .gxZi {
    font-size: 16px;
    font-weight: 600;
  }
  .gxinfo {
    padding: 15px;
    margin: 8px;
    border: 1px solid #e4e7ed;
    border-radius: 9px;
    box-shadow: 5px 5px 2.5px #f3f3f3;
  }
  .xzgxcard {
    padding: 5px;
    margin: 8px;
    color: white;
    background-color: #2196f3;
    border: 2px solid #2196f3;
    border-radius: 9px;
    box-shadow: 5px 5px 2.5px #f3f3f3;
  }
  .button1 {
    color: black;
    background-color: white;
    border: 2px solid #2196f3;
  }

  .button1:hover {
    color: white;
    background-color: #2196f3;
  }
  .gxweihu-contrainer {
    padding: 15px 15px 15px 30px;
  }
  .gxcard {
    padding: 5px;
    margin: 8px;
    border: 1px solid #e4e7ed;
    border-radius: 9px;
    box-shadow: 5px 5px 2.5px #f3f3f3;
  }
</style>
